<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 16:49:08
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:07:33
-->
<template>
  <div class="search_box">
    <div class="wrapper">
      <!-- 搜索开始 -->
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 手机号码 -->
          <el-form-item label="手机号码" prop="telephone">
            <el-input v-model="ruleForm.telephone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 搜索结束 -->
      <!-- 标题 -->
      <div class="title">报名的游学项目</div>
      <!-- 报名的游学项目 -->
      <div  v-if="number == true" >
        <div class="studyProject" v-for="item in details" :key="item">
        <!-- 图片 -->
        <div class="picture"><img :src="item.project.figure" alt="" /></div>
        <!-- 报名详细幸喜 -->
        <div class="reportDetial">
          <div>{{ item.project.name }}</div>
          <div>
            时间： {{ item.project.beginTime|fmtDate }} ~ {{ item.project.beginTime|fmtDate }}
          </div>
          <div>费用：{{ item.project.projectMoney }} 元</div>
          <div>报名时间： {{ item.insertTime|fmtTime }}</div>
          <div>报名状态：{{ item.status }}</div>
          <div>简介： {{ item.project.introduce }}</div>
        </div>
      </div>
      </div>
      <!-- 报名的游学项目结束 -->
      <div v-else class="toRegiater" >
         <el-link type="primary" @click="toApply()">暂无报名信息， 点击去报名</el-link>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      details: null,
      number:true,
      ruleForm: {
        telephone: "",
      },
      rules: {
        telephone: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 搜索
    submitForm() {
      get("/index/apply/query", this.ruleForm).then(
        (res) => {
          if (res.status == 200 && res.data.length != 0) {
            this.$message({
              type: "success",
              message: res.message,
            });
            // console.log(res.data);
            this.details = res.data;
            this.number = true;
          } else {
            this.number = false;
          }
        }
      );
    },
    // 没有报名信息点击去报名
    toApply(){
      this.$router.push({path:'/apply',query:{id:this.$route.query.id}})
    }
  },
  created() {},
};
</script>

<style scoped lang='scss'>
.search_box {
  padding: 1em 0;
  .wrapper {
    .form {
      padding: 2em 30%;
    }
    .title {
        font-size: 20px;
        line-height: 4em;
        border-bottom: 1px solid #f4f4f4;
      }
    .studyProject {
      padding: 1em;
      border-bottom: 1px solid #f4f4f4;
      display: flex;
      // 图片
      .picture {
        width: 300px;
        height: 200px;
        overflow: hidden;
        img{
          width: 100%;
        }
      }
      // 报名详细信息
      .reportDetial {
        width: 300px;
        height: 200px;
        padding: 0 2em;
        flex: 1;
        div {
          margin: 5px 0;
        }
      }
    }
  }
}
</style>